<template>
  <div class="incspe">
      <tem-header :title="typeText + '一笔'"></tem-header>
      <div class="body">
          <div class="money bg">
              <div class="input flex-boxs"><span>金额:</span><input type="number" v-model="incspes.money" number /></div>
          </div>
          <div class="type bg">
               <dl class="fl-boxs">
                    <dt class="bo-b">{{ typeText }}类型</dt>
                    <template v-if="types && types.length">
                        <dd v-for="item in types" @click="selectType(item.typename)" :class="{'active': item.select}">{{ item.typename }}</dd>
                    </template> 
                    <dd v-else>{{ typeMeg }}</dd>
              </dl>
              <dl class="operation fl-boxs bo-t">
                  <dd class="add-type-btn clear" @click="addType"><i class="fa fa-plus"></i></dd>
                  <dd class="alter-type-btn" @click="alterType"><i class="fa fa-pencil"></i></dd>
              </dl>
          </div>
          <div class="date bo-b bg">
              <h2>时间 <span>{{ incspes.date }}</span></h2>
          </div>
          <div class="remark bg">
              <h2 class="bo-b">备注</h2>
              <div><textarea v-model="incspes.remark"></textarea></div>
          </div>
          <div class="btn-box">
              <div v-show="showBtn" class="flex-boxs flex-align-x-sa">
                <input type="button" class="bm-btn-5 normal" value="确定" @click="operate(true)" />
                <input type="button" class="bm-btn-2 normal" value="返回" @click="operate(false)" />
              </div>
              <p v-show="!showBtn">{{ submitMeg }}</p>
          </div>
      </div>
      <tem-add-type v-show="isAddTyle" @result="addTypecallback"></tem-add-type>
      <tem-alter-type v-show="isAlterTyle" :types-list="types" @result="alterTypecallback"></tem-alter-type>
  </div>
</template>

<script>
import { apiType, apiAlterType, apiIncspe } from '@http'
import header from '@components/header'
import addType from '@components/add-type'
import alterType from '@components/alter-type'
export default {
    data () {
        return {
            // 类型
            types: null,
            typeMeg: '加载收支类型就绪',
            // 显示添加类型
            isAddTyle: false,
            isAlterTyle: false,
            // 记录数据
            incspes: {
                incspecode: null,
                typecode: null,
                typename: null,
                incspe: this.$route.params.isincspe === 'income' ? '1' : '-1',
                money: 0,
                remark: null,
                date: null
            },
            // 按钮
            showBtn: true,
            submitMeg: null,
            submitTimer: null
        }
    },
    components: {
        'tem-header': header,
        'tem-add-type': addType,
        'tem-alter-type': alterType
    },
    created () {
        this.nowtime()
        this.gettype()
    },
    methods: {
        // 当前时间
        nowtime () {
            let now = new Date()
            let y = now.getFullYear()
            let m = now.getMonth() + 1
            let d = now.getDate()
            m = m < 10 ? '0' + m : m
            d = d < 10 ? '0' + d : d
            this.incspes.date =  y + '-' + m + '-' + d
        },
        // 获取收支类型
        gettype () {
            this.typeMeg = '正在加载类型...'
            apiType ({incspe: this.incspes.incspe})
                .then((response) => {
                    if (response.data.status === 1) {
                        if (response.data.data) {
                            response.data.data.forEach((item, index, arr) => {
                                 item.select = false
                            })
                            this.types =  response.data.data
                            this.selectType(this.types[0].typename)
                        }
                        else {
                            this.typeMeg = '数据为空'
                        }
                    }
                    else {
                        this.typeMeg = '加载类型失败'
                    }
                })
                .catch((error) => {
                    this.typeMeg = '加载类型失败'
                })
        },
        // 选择收支类型
        selectType (name) {
            this.types.forEach((item, index, arr) => {
                if (item.typename === name) {
                    item.select = true
                    this.incspes.typecode = item.typecode
                    this.incspes.typename = item.typename
                }
                else {
                    item.select = false
                }
            })
        },
        // 打开添加收支类型
        addType () {
            this.isAddTyle = true
        },
        alterType () {
            this.isAlterTyle = true
        },
        // 收支类型反馈
        addTypecallback (is, name) {
            this.isAddTyle = false
            if (is) {
                let repeat = false
                this.types = this.types || []
                this.types.forEach((item, index, arr) => {
                    if (item.typename === name) {
                        repeat = true
                    }
                })
                if (!repeat) {
                    this.types.push({
                        typecode: null,
                        typename: name,
                        select: false
                    })
                    this.selectType(name)
                }
            }
        },
        alterTypecallback () {
            this.isAlterTyle = false
            let params = null;
            apiAlterType (params)
                .then((response) => {

                })
        },
        // 提交
        submit () {
            this.showBtn = false
            if (this.incspes.money > 0) {
                let incspe = new URLSearchParams();
                incspe.append('incspecode', this.incspes.incspecode);
                incspe.append('typecode', this.incspes.typecode);
                incspe.append('typename', this.incspes.typename);
                incspe.append('incspe', this.incspes.incspe);
                incspe.append('money', this.incspes.money);
                incspe.append('remark', this.incspes.remark);
                incspe.append('date', this.incspes.date);

                this.submitMeg = '正在提交记录...'
                apiIncspe (incspe)
                    .then((response) => {
                        this.submitMeg = response.data.message
                        clearTimeout(this.submitTimer)
                        this.submitTimer = setTimeout(() => {
                            this.showBtn = true
                        }, 3000)
                    })
                    .catch((error) => {

                    })
            }
            else {
                this.submitMeg = '金额不能为零'
                clearTimeout(this.submitTimer)
                this.submitTimer = setTimeout(() => {
                    this.showBtn = true
                }, 3000)
            }
        },
        // 操作
        operate(is) {
            if (is) {
                this.submit()
            }
            else {
                this.$router.go(-1)
            }
        }
    },
    computed: {
        typeText () {
            if (this.incspes.incspe > 0) {
                return '收入'
            }
            else if (this.incspes.incspe < 0) {
                return '支出'
            }
            else {
                return 'xx'
            }
        }
    }
}
</script>

<style lang="less" scope>
@import '../assets/style/base/b-gether-var.less';
.incspe{
    .money{margin-top:@10px; padding:@15px;
        span{flex:0 0 50px; line-height:@40px; font-size:14px; font-weight:bold;}
        input{font-size:14px; font-weight:bold; color:@colorB-01; border:none;}
    }
    .type{margin-top:@10px;
        dt{width:100%; margin-bottom:@15px; padding-left:@13px; line-height:@40px; font-size:@12px; color:@color; border-left:2px solid @color;}
        dd{height:@30px; padding:0 @15px; margin:0 0 @15px @15px; line-height:@30px; border-radius:@15px; border:1px solid @color;}
        .active{color:#fff; background:@color;}
        // .add-type-btn{}
        .operation{
            dd{margin:@10px 0 @10px @15px; padding:0 @20px; color:@grey-01; border-color:@grey-02;}
        }
    }
    .date{margin-top:@10px;
        h2{padding-left:@13px; line-height:@40px; font-size:@12px; color:@color; border-left:2px solid @color;}
    }
    .remark{margin-top:@10px;
        h2{padding-left:@13px; line-height:@40px; font-size:@12px; color:@color; border-left:2px solid @color;}
        div{padding:@8px @15px @3px @15px;}
        textarea{width:100%; min-height:@75px; padding:@10px; border:none; border-radius:@2px; background:#f0f0f0;}
    }
    .btn-box{margin-top:@40px;
        input{flex:0 0 @120px;}
        p{text-align:center; line-height:@40px;}
    }
}
</style>